<template>
    <!-- <div>好友{{$route.params.id}}信息</div> -->
    <div class="friend-info" :key="id">
        好友{{id}}信息
        <ul>
            <li v-if="name">姓名:{{name}}</li>
            <li v-if="phone">电话:{{phone}}</li>
            <li v-if="email">邮件:{{email}}</li>
        </ul>
    </div>
</template>
<script>
import axios from 'axios'
const reqObject = {
    "type": "object",
    "properties": {
        "name": {
          "type": "string",
          "ipsum": "name"
        },
        "phone": {
          "type": "string",
          "format": "phone"
        },
        "email": {
          "type": "string",
          "format": "email"
        }
    }
}
export default {
    props: ["id"],
    data(){
        return {
            name:null,
            phone:null,
            email:null,
        }
    },
    beforeRouteUpdate(to, from, next) {
        axios.post("http://schematic-ipsum.herokuapp.com/", reqObject)
            .then(response => {
                this.name = response.data.name;
                this.phone = response.data.phone;
                this.email = response.data.email;
                next();
            });
    },
    beforeRouteEnter(to, from, next) {
        console.log('beforeRouteEnter running..........')
        axios.post("http://schematic-ipsum.herokuapp.com/", reqObject)
            .then(response => {
                next(vm => {
                    vm.name = response.data.name;
                    vm.phone = response.data.phone;
                    vm.email = response.data.email;
                });
            });
    }
};
</script>
<style scoped>
.friend-info ul{
    padding-left:0;
    list-style: none;
}

</style>
